import React from 'react'
import { Swiper } from "antd-mobile";
import { Toast } from "antd-mobile";

import '../assets/css/mine.css'
import { getMineBanner } from '../request/api'

class Mine extends React.Component {
    constructor() {
        super()
        this.state = {
            banner: []
        }
    }
    componentDidMount() {
        getMineBanner()
            .then(res => {
                // console.log(res, 'res');
                if (res.data.code == 200) {
                    this.setState({
                        banner: res.data.list
                    }, () => {
                        // console.log(this.state.banner);
                    })
                    // console.log(this.state.banner);
                }
            })
    }
    // changeInfo(e){
    //     console.log(e,'事件源');
    // }
    esc() {
        sessionStorage.removeItem('userinfo')
        console.log('3333');
        Toast.show({
            content: "您已退出登录",
        });
    }
    render() {
        const { banner } = this.state
        console.log(banner);
        return (
            <div>
                <header>
                    <p>我的</p>
                </header>

                <div className='order_bg'>
                    <div className='touxiang'>
                        <img onClick={this.esc.bind(this)} src={require("../assets/img/useravatar.png")} alt="" />
                        <div className='personal_data'>
                            <p className='name'>代用名</p>
                            <p className='data'>完善资料让小U更懂你</p>
                        </div>
                        <img className='sign_in' src={require('../assets/img/编组-6.png')} alt="" />
                    </div>
                    <div className='fenlei'>
                        <div className='shuzi'>
                            <p>12</p>
                            <p>12</p>
                            <p>￥0</p>
                            <p>12</p>
                        </div>
                        <div className='tiaozhuan'>
                            <p>我的收藏</p>
                            <p>浏览记录</p>
                            <p>我的红包</p>
                            <p>优惠卷</p>
                        </div>
                    </div>
                    <div className='order'>
                        <div className='dingdan'>
                            <p className='dingdan_left'>我的订单</p>
                            <p className='dingdan_right'>全部订单》</p>
                        </div>
                        <div className='tubiao'>
                            <img src={require('../assets/img/iconuserorder@3x.png')} alt="" />
                            <img src={require('../assets/img/iconuserorder备份@3x.png')} alt="" />
                            <img src={require('../assets/img/iconuserorder备份-2@3x.png')} alt="" />
                            <img src={require('../assets/img/iconuserorder备份-3@3x.png')} alt="" />
                        </div>
                    </div>
                </div>
                <div className='vbody'>
                    <div className='banner'>
                        {/* 轮播图 */}
                        <Swiper autoplay autoplayInterval={1000} loop>
                            {banner.map(item => {
                                return (
                                    <Swiper.Item key={item.id}>
                                         <img src={item.img} alt="" />
                                    </Swiper.Item>

                                )
                            })}
                        </Swiper>
                    </div>
                    <div className='gongneng'>
                        <div className='one'>
                            <img src={require("../assets/img/icon_address@3x.png")} alt="" />
                            <p>地址管理</p>
                        </div>
                        <div className='one'>
                            <img src={require("../assets/img/icon_wallet@3x.png")} alt="" />
                            <p>我的钱包</p>
                        </div>
                        <div className='one'>
                            <img src={require("../assets/img/icon_qr-code@3x.png")} alt="" />
                            <p>我的二维码</p>
                        </div>
                        <div className='one'>
                            <img src={require("../assets/img/icon_buddies@3x.png")} alt="" />
                            <p>我的小伙伴</p>
                        </div>
                        <div className='one'>
                            <img src={require("../assets/img/icon_tryout@3x.png")} alt="" />
                            <p>0元试用</p>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
export default Mine